<template>
   <div >

        <div>
             <i class="el-icon-arrow-left" @click="Back()"></i> 
        </div>

        <div id="Title">
            <!-- <div v-if="User && User.uid==PersonalData.uid">我的个人主页</div>
            <div v-else>{{PersonalData.username}}的个人主页</div> -->
        </div>
       
      

        <div class="fun">
            <i v-for="(fun,index) in getFunData" :key="index" :class="fun.icon" @click="beforeClick(fun)"></i>
        </div>
   </div>
</template>
<script>
import request from '@/axios'
import {mapState,mapMutations,mapActions} from 'vuex'
  export default 
  {
     name :'', 
     data() {
      return {
         funData:[
            {icon:'el-icon-search',click:this.SEARCHARTICLEON,type:3},
            {icon:'el-icon-plus',click:this.APPLYFRIENDON,type:0},
            {icon:'el-icon-position',click:null,type:1},
            

            {icon:'el-icon-view',click:this.BROWSEON,type:2},
            {icon:'el-icon-edit-outline',click:this.EDITINFORMATIONON,type:2},
            {icon:'el-icon-lock',click:this.EDITPASSWORDON,type:2},
            {icon:'el-icon-setting',click:this.SPACESETON,type:2},
             {icon:'el-icon-delete',click:this.RECYCLEBINON,type:2},
         ]
      }
     },
     computed:{
        ...mapState('Login',['User']),
        ...mapState('Personal',['PersonalData']),
        getFunData(){ //2:别人主页 1:自己主页

         if(this.User==null || this.PersonalData?.extra?.friendstate == 0){
           this.funData[1].type = 1
         }
          let type = 1
          if(this.User==null ||  this.User.uid!=this.PersonalData.uid)
          type =2
          return this.funData.filter((item) => item.type != type && item.type != 0 )
        }
     },
     methods:{
        ...mapActions('Login',['loginOut']),
        //修改用户信息窗口 修改密码信息窗口 浏览量窗口 用户申请好友窗口 空间设置 搜索 回收站
        ...mapMutations('Personal',['EDITINFORMATIONON','EDITPASSWORDON','BROWSEON','APPLYFRIENDON','SPACESETON','SEARCHARTICLEON','RECYCLEBINON']), 
       async beforeClick(fun){
         if(fun.click == null) return this.$message.warning('功能暂未实现')
         if(this.User == null) return this.$public.toLogin()
       
         let res = await  request.get("/api/check/token"); 
 
         if(res?.data?.code != 200) {
             this.loginOut()
             return this.$public.toLogin()
         }
         fun.click()
         
       },
       Back(){
         this.$public.Back()
       },
       }
  }
</script>
<style scoped lang='less'>
#Title{
   color:white;
   font-size: 20px;
   font-weight: 600;
   padding:5px 10px;
   border-radius: 5px;
   // background: var(--GeneralBackColor);
}

i{
   border-radius: 5px;
   margin: 5px;padding:5px;
   background: var(--GeneralBackColor);
   color: white;font-weight: 600;
   font-size: 20px;
}
</style>